<template>
	<div class="e-login">
		<el-row>
			<el-col :span="15" style="height: 400px;">

			</el-col>
			<el-col :span="8">
				<div style="background-color: #FFFFFF; margin-top: 60px;">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>用户登录</span>
						</div>
						<div>
							<el-form label-width="0px">
								<el-form-item>
									<el-input v-model="mobile" placeholder="手机号">
										<template slot="prepend">用户名</template>
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-input v-model="password" type="password">
										<template slot="prepend">密&nbsp;码</template>
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="success" @click="submitForm" style="width: 100%;">登录</el-button>
								</el-form-item>

							</el-form>
						</div>
						<div style="text-align: right;">
							<router-link to="/register">免费注册</router-link>
							<router-link to="/forgetpassword">忘记密码</router-link>
						</div>
					</el-card>
				</div>
			</el-col>
			<el-col :span="1"></el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				mobile: "",
				password: ''
			};
		},
		methods: {
			submitForm() {
				let _this = this;
				if (_this.mobile && _this.password) {

				} else {
					_this.$message('用户名或密码不能为空');
					return;
				}
				_this.$axios.get(_this.$api.AuthLogin, {
						params: {
							mobile: _this.mobile,
							password: _this.password
						}
					}).then(function(response) {
						console.log(response);
						_this.$store.commit('setToken', response.data.token)
						_this.$store.commit('setUser', response.data.userInfo)
						_this.$router.push({
							path: '/'
						})
					})
					.catch(function(error) {
						_this.$alert('用户名或密码不正确，请重新输入', '提示', {
							confirmButtonText: '确定',
						});
					});


			}
		},
	}
</script>

<style>
	.e-login {
		height: 400px;
		background: url(../../assets/images/bg.jpg) no-repeat center 0px;
		background-position: center 0;
		background-size: cover;
	}
</style>
